<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6-async函数和await-错误捕获</title>
  </head>
  <body>
    <h2>async函数和await-错误捕获</h2>
    <form>
      <span>省份：</span>
      <select>
        <option class="province"></option>
      </select>
      <span>城市：</span>
      <select>
        <option class="city"></option>
      </select>
      <span>地区：</span>
      <select>
        <option class="area"></option>
      </select>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.3/axios.js"></script>
    <script>
      async function func() {
        try {
          // 1. 需要执行的代码
          const res1 = await axios({
            url: 'https://hmajax.itheima.net/api/province'
          })
          console.log(res1)
          const pname = res1.data.list[0]
          document.querySelector('.province').innerHTML = pname

          // 2. 获取第1个省的城市数据,并展示第1个城市
          const res2 = await axios({
            url: 'https://hmajax.itheima.net/api/city',
            params: {
              pname
            }
          })
          console.log(res2)
          const cname = res2.data.list[0]
          document.querySelector('.city').innerText = cname

          // 3. 获取第1个城市的区数据，并展示第1个区
          const res3 = await axios({
            // 不写 await 关键字 获取到的就是Promise对象（注意）
            url: 'https://hmajax.itheima.net/api/area',
            params: {
              pname,
              cname
            }
          })
          console.log(res3)
          const aname = res3.data.list[0]
          document.querySelector('.area').innerText = aname
        } catch (error) {
            // 2. try 中出错了 需要执行的代码，通过error 获取错误信息
            console.dir(error)
        }
      }
    //   调用
    func()
    </script>
  </body>
</html>
